<extend name="Base/common"/>

<block name="body">
	<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
	<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
	<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
	<div class="mui-content">
	    <div class="mui-slider detail_slider">
	      <div class="mui-slider-group">
	        <gt name="info.video" value="0">
	        <div class="mui-slider-item">
				<video id="show_video" class="video-js vjs-default-skin" autoplay controls preload="none" data-setup="{}" style="width: 100%;height: 100%">
					<source src="{$info.video_path|default=''}" type="{$info.video_info.mime}">
				</video>
	        </div>
	        </gt>
	        <div class="mui-slider-item">
            	<empty name="info.pic">
	        	<img src="http://placehold.it/750x350"/>
            	<else />
            	<img src="{$info.pic|get_cover='path'}"/>
            	</empty>
	        </div>
	      </div>
          <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
	        <gt name="info.video" value="0">
            <div class="mui-indicator"></div>
	        </gt>
          </div>
	    </div>
	    <div class="detail_snatch_info">
	    	<div class="title">第{$info.id}期：{$info.title}</div>
	    	<div style="float: left;">
		    	<div class="prize">
		    		<li>奖品:<span><eq name="info.prize" value="coin">钻石<else />现金</eq></span></li>
		    		<li>结束时间:{$info.end_time|date="Y-m-d H:i",###}</li>
		    	</div>
		    	<div class="join_num">
		    		<li>总需：{$info.total_num}人</li>
		    		<li>剩余：<span><php>echo ($info['total_num'] - $info['num'])</php></span>人</li>
		    	</div>
	    	</div>
	    	<div style="float:right;width: 5rem;">
	    		<img src="__IMG__/qrcode.jpg" width="100%">
	    	</div>
	    	<div class="process_bg">
	    		<img src="__IMG__/progress.png" width="{$info.progress}%"/>
	    	</div>
	    </div>
	    <if condition="$info.status eq 2">
	    <div class="winner_div">
	    	<div class="winner_icon"><img src="__IMG__/icon_winner.png"/></div>
	    	<div class="mui-pull-left winner_header">
	    		<if condition="get_avatar($info['lottery_uid']) eq ''">
	    		<img src="__IMG__/default.jpg">
	    		<else />
	    		<img src="{$info.lottery_uid|get_avatar}"/>
	    		</if>
	    	</div>
	    	<div class="winner_info">
	    		<li>获奖者：{$info.lottery_uid|get_nickname|substr_cut}</li>
	    		<li>揭晓时间：{$info.lottery_time|date="Y-m-d H:i",###}</li>
	    	</div>
	    	<div class="div_winner_code">
	    		<div class="code_title"> 幸运号码：</div>
	    		<div class="winner_code">{$info.lottery_code}</div>
	    	</div>
	    </div>
	    </if>
    	<div class="user_join_info">
	    	<empty name="join_code_info">
		    <div class="no_join">
		    	您没有参与本次活动，快去选择参加吧
		    </div>
		    <else />
		    <div class="has_join">
		    	您本次参与活动的幸运号码为：
		    	<if condition="$info.status eq 2">
		    		<span style="color: #000;">{$join_code_info.code}</span>
		    	<else />
		    	<div class="join_code">{$join_code_info.code}</div>
		    	</if>
		    </div>
			</empty>
    	</div>
	    <div class="user_info">
    		<div class="mui-pull-left">发起人：</div>
    		<div class="mui-pull-left user_avator">
	    		<if condition="get_avatar($info['uid']) eq ''">
	    		<img src="__IMG__/default.jpg">
	    		<else />
	    		<img src="{$info.uid|get_avatar}"/>
	    		</if>
    		</div>
    		<div class="mui-pull-left">
    		<gt name="info.uid" value="0">
    		{$info.uid|get_nickname|substr_cut}
    		<else />
    		(管理员)
    		</gt>
    		</div>
    		<eq name="info.uid" value="$uid">
	    		<eq name="info.status" value="1">
	    			<button type="button" class="mui-btn mui-pull-right" id="btn_set_lottery">立即开奖</button>
	    		<else />
	    			<button type="button" class="mui-btn mui-pull-right mui-disabled" style="background-color:#ccc">立即开奖</button>
	    		</eq>
    		</eq>
	    </div>
	    <ul class="mui-table-view join_list">
            <li class="mui-table-view-cell">
		    	<div class="mui-pull-left">
		    		本期参与人
		    	</div>
		    	<div class="mui-text-right">
		    		{$info.start_time|date="Y-m-d H:i",###} 开始
		    	</div>
            </li>
            <notempty name="join_list">
            <foreach name="join_list" item="vo">
	        <li class="mui-table-view-cell mui-media">
    			<div class="mui-media-object mui-pull-left user_avator">
		    		<if condition="get_avatar($vo['uid']) eq ''">
		    		<img src="__IMG__/default.jpg">
		    		<else />
		    		<img src="{$vo.uid|get_avatar}"/>
		    		</if>
    			</div>
                <div class="mui-media-body">
                    {$vo.uid|get_nickname|substr_cut}
                    <p class="mui-ellipsis">{$vo.add_time|date="Y-m-d H:i",###}</p>
                </div>
	        </li>
	    	</foreach>
	    	</notempty>
	    </ul>
	</div>
	<eq name="info.status" value="1">
	<div class="float_btn_join">
	    <empty name="join_code_info">
		<a href="{:U('snatch/getCode',array('id'=>$info['id']))}" class="mui-btn">立即参与</a>
		<else />
		<a href="javascript:void();" class="mui-btn mui-disabled" style="background-color: #ccc;">立即参与</a>
		</empty>
	</div>
	</eq>
</block>
<block name="script">
	<script type="text/javascript">
		$("#btn_set_lottery").on('click',function(){
			var snatch_id = "{$info.id}";
			if (confirm('点击开奖，立即开奖，中奖金额自动设为现有参与金额','您确定立即开奖?')) {	
				$.post("{:U('lottery')}",{"snatch_id":snatch_id},function(result){
					if (result.status == 1) {
						var msg = "开奖号码:" + result.lottery_info.lottery_code + "<br/>恭喜"+ result.lottery_info.nickname + "中奖啦！";
						alert(msg);
						location.reload();
					} else{
						alert(result.info);
						location.href = result.url;  
					}
				},'json');
			}
			// mui.confirm('点击开奖，立即开奖，中奖金额自动设为现有参与金额','您确定立即开奖?',['取消','立即开奖'],function (e) {
			// 	if (e.index == 1) {					
			// 		$.post("{:U('lottery')}",{"snatch_id":snatch_id},function(result){
			// 			if (result.status == 1) {
			// 				var msg = "开奖号码:" + result.lottery_info.lottery_code + "<br/>恭喜"+ result.lottery_info.nickname + "中奖啦！";
			// 				mui.confirm(msg,"中奖提醒",['确定'],function(e){
			// 					location.reload();
			// 				});
			// 			} else{
			// 				mui.alert(result.info);
			// 				if (result.url != '') {
			// 					mui.later(function(){
			// 						location.href = result.url;  
			// 					},1000)								
			// 				}
			// 			}
			// 		},'json');
			// 	}
			// },'div');
		})
	</script>
</block>
